<script setup lang="ts">
import { onMounted, ref } from 'vue'

const imgRef = ref()
onMounted(() => {
  imgRef.value.addEventListener('animationend', () => {
    window.api.controlFrame(true)
  })
})
</script>
<template>
  <div class="container">
    <img
      ref="imgRef"
      ondragstart="return false;"
      draggable="false"
      src="../../assets/img.png"
      alt="img"
    />
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 98vh;
  width: 98vw;
  background: linear-gradient(to right, #9dd6ff, #d6bfff);
  opacity: 0.98;
  border-radius: 26px 30px 30px 28px;
  animation: fadeIn;
  animation-duration: 1s;
}

.container img {
  width: 200px;
  height: 200px;
  --animate-duration: 3s;
  animation: rollIn;
  animation-duration: 3s;
}
</style>
